<template>
	<view class="forget">
		
		<view class="content">
			<!-- 主体 -->
			<view class="main">
				<view class="tips">若你忘记了密码，可在此重置新密码。</view>
				<uInput   type="text" maxlength="11" v-model="phoneData"  placeholder="请输入手机号码"></uInput>
				<uInput isShowPass  type="password" maxlength="11" v-model="passData"  placeholder="请输入新密码"></uInput>
				<uInput :time="time" isShowCode type="text" maxlength="4" @setCode="setCode" v-model="verCode"  placeholder="验证码"></uInput>
				
			</view>
			
			<wButton 
				text="重置密码"
				bgColor="#354E44"
				:rotate="isRotate" 
				@tap="startRePass"
			></wButton>

		</view>
	</view>
</template>

<script setup>
	import lejuAPI from "@/api/user/index.js"
	import uInput from "@/components/user_input.vue"
	import wButton from '@/components/watch-login/watch-button.vue' //button
	import { ref } from "vue";
	const phoneData = ref("")  // 电话
	const passData = ref("")   // 密码
	const verCode = ref("")    // 验证码
	const time = ref(60)       // 倒计时时间
	const isRotate = ref(false) //是否加载旋转
	
	function setCode() {
				
				if (phoneData.value.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				// runCode.value = !runCode.value
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '模拟倒计时触发'
				});
				var timer = setInterval(()=>{
					time.value --;
				},1000)
				setTimeout(function() {
					clearInterval(timer)
					time.value = 60; //假装模拟下需要 终止倒计时
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '模拟倒计时终止'
					});
				}, 3000)
			}
	const startRePass =async() =>{
				//重置密码
				if(isRotate.value){
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (phoneData.value.length != 11) {
				    uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '手机号不正确'
				    });
				    return false;
				}
			    if (passData.value.length < 6) {
			        uni.showToast({
			            icon: 'none',
						position: 'bottom',
			            title: '密码不正确'
			        });
			        return false;
			    }
				if (verCode.value.length != 4) {
				    uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '验证码不正确'
				    });
				    return false;
				}
				isRotate.value=true;
				var result = await lejuAPI.resetPassword(phoneData.value)
				console.log(result);
				if(result.success == true){
					isRotate.value=false;
					uni.showToast({
						title:"修改成功"
					});
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages/user/login/login"
						})
					},1000)
				}else{
					isRotate.value=false;
				}
				
			}
	
</script>

<style>
	@import url("../../../components/watch-login/css/icon.css");
	
</style>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		justify-content:center;
		/* margin-top: 128upx; */
	}
	
	/* 头部 logo */
	.header {
		width:161upx;
		height:161upx;
		box-shadow:0upx 0upx 60upx 0upx rgba(0,0,0,0.1);
		border-radius:50%;
		background-color: #000000; 
		margin-top: 128upx;
		margin-bottom: 72upx;
		margin-left: auto;
		margin-right: auto;
	}
	.header image{
		width:161upx;
		height:161upx;
		border-radius:50%;
	}
	
	/* 主体 */
	.main {
		display: flex;
		flex-direction: column;
		padding-left: 70upx;
		padding-right: 70upx;
	}
	.tips {
		color: #999999;
		font-size: 28upx;
		margin-top: 64upx;
		margin-left: 48upx;
	}
	
	/* 其他登录方式 */
	.other_login{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 156upx;
		text-align: center;
	}
	.login_icon{
		border: none;
		width: 64rpx;
		height: 64rpx;
		font-size: 64upx;
		margin: 0 64upx 0 64upx;
		color: rgba(0,0,0,0.7);
		background-color: #fff;
		border-radius: 32rpx;
	}
	.wechat_color{
		color: #83DC42;
	}
	.weibo_color{
		color: #F9221D;
	}
	.github_color{
		color: #24292E;
	}
	
	/* 底部 */
	.footer{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		margin-top: 64upx;
		color: rgba(0,0,0,0.7);
		text-align: center;
		height: 40upx;
		line-height: 40upx;
	}
	.footer text{
		font-size: 24upx;
		margin-left: 15upx;
		margin-right: 15upx;
	}
</style>

